<div>


  <div class="kuiSideBarSection">
    <div class="kuiSideBarSectionTitle">
      <div class="kuiSideBarSectionTitle__text">
        Base Layer Settings
      </div>
    </div>


    <div class="kuiSideBarFormRow" ng-show="!options.enabled">
      <label class="kuiSideBarFormRow__label" for="tmsLayers">
        Layers
      </label>
      <div class="kuiSideBarFormRow__control">
        <select
          id="tmsLayers"
          class="kuiSelect kuiSideBarSelect"
          ng-model="options.selectedTmsLayer"
          ng-options="layer.id for layer in options.tmsLayers track by layer.id"
        ></select>
      </div>
    </div>

    <div class="kuiSideBarFormRow">
      <label class="kuiSideBarFormRow__label" for="wmsCompliantMapServer">
        WMS map server
      </label>

      <div class="kuiSideBarFormRow__control">
        <input
          id="wmsCompliantMapServer"
          type="checkbox"
          name="wms.enabled"
          ng-model="options.enabled"
        >
        &nbsp;
        <icon-tip
          content="'Use WMS compliant map tile server. For advanced users only.'"
          position="'right'"
        ></icon-tip>
      </div>
    </div>

    <div ng-show="options.enabled" class="well">
      <div class="vis-option-item form-group">
        <p>WMS is an OGC standard for map image services. For more information, go <a
          href="http://www.opengeospatial.org/standards/wms">here</a>.</p>
        <label>
          WMS url*
          <icon-tip
            position="'right'"
            content="'The URL of the WMS web service'"
          ></icon-tip>
        </label>
        <input type="text" class="form-control"
               name="wms.url"
               ng-model="options.url">
      </div>

      <div class="vis-option-item form-group">
        <label>
          WMS layers*
          <icon-tip
            position="'right'"
            content="'A comma seperated list of layers to use'"
          ></icon-tip>
        </label>
        <input type="text" class="form-control"
               ng-require="options.enabled"
               name="wms.options.layers"
               ng-model="options.options.layers">
      </div>

      <div class="vis-option-item form-group">
        <label>
          WMS version*
          <icon-tip
            position="'right'"
            content="'The version of WMS the server supports'"
          ></icon-tip>
        </label>
        <input type="text" class="form-control"
               name="wms.options.version"
               ng-model="options.options.version">
      </div>

      <div class="vis-option-item form-group">
        <label>
          WMS format*
          <icon-tip
            position="'right'"
            content="'Usually image/png or image/jpeg. Use png if the server will return transparent layers.'"
          ></icon-tip>
        </label>
        <input type="text" class="form-control"
               name="wms.options.format"
               ng-model="options.options.format">
      </div>

      <div class="vis-option-item form-group">
        <label>
          WMS attribution
          <icon-tip
            position="'right'"
            content="'Attribution string for the lower right corner'"
          ></icon-tip>
        </label>
        <input type="text" class="form-control"
               name="wms.options.attribution"
               ng-model="options.options.attribution">
      </div>

      <div class="vis-option-item form-group">
        <label>
          WMS styles*
          <icon-tip
            position="'right'"
            content="'A comma seperated list of WMS server supported styles to use. Blank in most cases.'"
          ></icon-tip>
        </label>
        <input type="text" class="form-control"
               name="wms.options.styles"
               ng-model="options.options.styles">
      </div>

      <p>* if this parameter is incorrect, maps will fail to load.</p>


    </div>
  </div>
</div>
